<template>
	<view>
		<view class="order">
			<view class="order-code">
				订单号: {{orderDetail.order.code}}
			</view>
			<view class="order-content">
				<view class="content-left">
					<image :src="orderDetail.hire.hire_img[0].url" mode=""></image>
				</view>
				<view class="content-right">
					<view class="top-left">
						车辆名称:{{orderDetail.hire.name}}
					</view>
					<view class="right-top">
						{{orderDetail.hire.gearbox}}/{{orderDetail.hire.fuel}}/{{orderDetail.hire.emission}}/{{orderDetail.hire.seat}}
					</view>
					<view class="right-car">
						￥{{orderDetail.hire.price}}
					</view>
				</view>
			</view>
			<view class="order-free">
				费用: ￥{{orderDetail.order.amount}}
			</view>
		</view>
		<view class="comment">
			<view class="rate">
				<view class="rate-left">
					综合评分:
				</view>  
				<view class="rate-right">
					<u-rate :count="count" v-model="rate" size="36"></u-rate>
				</view>
			</view>
			<view class="content">
				<view class="content-con">
					<u-input v-model="value" type="textarea" :border="border" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button type="primary" @click="subcomment">提交评价</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				rate: 0,
				orderDetail: [],
				userInfo: [],
				value: '',
			};
		},
		onLoad(options) {
			if(options.item){
				this.orderDetail = JSON.parse(decodeURIComponent(options.item))
				console.log(this.orderDetail)
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userData');
		},
		methods: {
			subcomment() {
				if(this.value == ''){
					uni.$u.toast('请填写评价')
				}else{
					uni.request({
						url: uni.getStorageSync('URL') + 'home/order/order/criticize',
						method: 'POST',
						data: {
							busid: this.userInfo.id,
							orderid: this.orderDetail.order.id,
							hireid: this.orderDetail.hire.id,
							comment: this.value,
							stoid:  this.orderDetail.order.stoid,
							rate: this.rate,
							total: this.orderDetail.order.amount
						},
						header: {
							"X-Requested-With": "XMLHttpRequest"
						},
						dataType: 'json',
						success: (res)=> {
							if(res.data.data == 1){
								setTimeout(() => {
									uni.showToast({
										icon: 'none',
										title: '评价成功',
									});
									setTimeout(() => {
										uni.hideToast();
										//关闭提示后跳转
										uni.navigateBack({
											delta: 1
										});
									}, 1500)
								}, 0);
							}else {
								uni.showToast({
									icon: 'none',
									title: '评价失败，请稍后再试',
									duration: 2000,
								});
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #e1e1e1;
}
.order {
	margin: 20rpx auto;
	background-color: #ffffff;
	height: 305rpx;
	width: 90%;
	border-radius: 30rpx;
	// border: 1rpx solid;
	.order-code {
		margin-left: 20rpx;
		margin-top: 10rpx;
	}
	.order-top {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		padding: 15rpx;
	}
	.order-content {
		padding: 10rpx;
		display: flex;
		height: 200rpx;
		.content-left {
			width: 40%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content-right {
			padding: 10rpx;
			width: 60%;
			.right-top {
				font-size: 30rpx;
				margin-top: 10rpx;
			}
			.right-car {
				font-size: 26rpx;
				color: #adadad;
				margin-top: 10rpx;
			}
			.top-left {
				font-size: 30rpx;
				margin-top: 10rpx;
			}
		}
	}
	.order-free {
		width: 100%;
		font-size: 30rpx;
		text-align: right;
		padding: 10rpx;
		color: crimson;
	}
}
.comment {
	margin: 20rpx auto;
	background-color: #ffffff;
	height: 305rpx;
	width: 90%;
	border-radius: 30rpx;
	padding: 20rpx;
	.rate {
		display: flex;
	}
}
.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
</style>
